<template>
  <div class="audition132">
    <h3><strong>this指向：</strong></h3>
    <p>1. 全局上下文</p>
    <p>无论是否为严格模式，均指向全局对象。注意:严格模式下全局对象为undifined</p>
    <p>2. 函数上下文（函数内）</p>
    <p>默认的，指向函数的调用对象，且是最直接的调用对象</p>
    <p>简单调用，指向全局对象</p>
    <p>注意:严格模式下全局对象为undifined，某些浏览器未实现此标准也可能会是<span class="color">window</span></p>
    <h3><strong>改变this指向：</strong></h3>
    <p>1. new</p>
    <p>构造函数通过new生成实例，构造函数中的this通过new指向了自身的实例对象</p>
    <code class="code">
      function Star() {<br />
        <span class="indient">this.name = 'dilireba'</span><br />
      }<br />
      var dili = new Star<br />
      console.log(dili.name) // 'dilireba'
    </code>
    <p>2. call</p>
    <v-md-preview :text="text1" />
    <p>3. apply</p>
    <p>还用上面的例子，不过改用apply方法：</p>
    <code class="code">
      b.apply(a) // '张三'
    </code>
    <p>4. bind</p>
    <p>bind和call、apply不太一样，bind绑定后生成的是一个函数，这个函数需要调用一下</p>
    <code class="code">
      var c = b.bind(a)<br />
      c() // '张三'
    </code>
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition132',
  data() {
    return {
      text1: `${prefix}
      var user = 'dilireba'
      var a = {
        user: '张三',
        fn: function() {
          console.log(this.user)
        }
      }
      var b = a.fn
      b() // 'dilireba'
      b.call(a) // '张三'
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>